{extend name="common/common" /}

{block name="style"}
<style type="text/css">
.layui-form-pane .layui-form-label{
	height: 38px;
}
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight col-md-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>添加报销单</h5>
        </div>
        <div class="ibox-content">
			<form class="layui-form layui-form-pane" action="" id="addForm">
				<div class="layui-form-item">
					<label class="layui-form-label">申报金额</label>
					<div class="layui-input-inline">
						<input type="number" name="total_amount" value="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">申报部门</label>
					<div class="layui-input-inline">
						<input type="text" value="" class="layui-input selectDepart" readonly>
						<input type="hidden" class="layui-input" id="DepartId" readonly>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">申报职员</label>
					<div class="layui-input-inline">
						<select id="selectRole" lay-filter="selectRole">
						<option value="">请选择职位</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="s_id" id="selectUser" lay-filter="selectUser">
						<option value="">请选择职员</option>
						</select>
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">申报备注</label>
					<div class="layui-input-block">
						<textarea class="layui-textarea" name="remarks"></textarea>
					</div>
				</div>

				<div class="layui-form-item text-center">
		            <button class="btn btn-primary" type="submit">提交</button>
				</div>

			</form>
		</div>
	</div>
</div>

<div class="laycontent" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="tree"></ul>
</div>
{/block}

{block name="script"}
<script>
$(function(){

	layui.use(['form','laydate','tree'], function(){
  		var form = layui.form,laydate = layui.laydate;
		getTree(form);
		form.on('select(selectRole)', function(data){
			var role_id = data.value;
			var role_url = "{:url('department/getRoleUser')}?role_id=" + role_id;
			$.getJSON(role_url, function(res){
				var option_user = '<option value="">请选择职员</option>';
				for(i in res.data){
					option_user += '<option value="'+res.data[i].id+'">'+res.data[i].real_name+'</option>';
				}
				$('#selectUser').html(option_user);
				form.render();
			});
		});
  	});

	$('.selectDepart').on('click',function(){
		selectDepartBox = layer.open({
            type: 1,
            title: '请选择申报人部门',
            anim: 2,
            skin: 'layui-layer-molv', //加上边框
            area: ['300px', '450px'], //宽高
            content: $(".laycontent")
        });
	});

	$("#DepartId").on('change',function(){
		alert(0);
	});

	$('#addForm').on('submit',function(){
		var params = $('#addForm').serialize();
		$.post('./addExpense',params,function(res){
			if(res.code == 1){
				layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    layer.closeAll();
					window.history.back();
                });
			}else{
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});
});
function getTree(form){
    $.getJSON("{:url('department/index')}", function(res){
        layui.tree({
            elem: '#tree',
			nodes: res.data,
			click: function(node){
                nowNode = node;
				$('.selectDepart').val(node.name);
				$('#DepartId').val(node.id);
				var depart_url = "{:url('department/getDepartRoles')}?depart_id=" + node.id;
				$.getJSON(depart_url, function(res){
					var option_role = '<option value="">请选择职位</option>';
					for(i in res.data){
						option_role += '<option value="'+res.data[i].id+'">'+res.data[i].role_name+'</option>';
					}
					$('#selectRole').html(option_role);
					form.render();
				});
				layer.close(selectDepartBox);
            }
        });
    });
}
</script>
{/block}
